<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script>
        function tipUsername(){
            document.getElementById("s1").innerHTML = "<span style='font-size: 12px;background:#FFFFDA;margin-left: 10px;'>用户名由字母、数字、下划线、点、减号组成,只能以数字字母开头和结尾,长度4-18位</span>";
        }
        function checkUsername(){
            let username = document.getElementById("username").value;
            let regExp = /^[0-9a-z][0-9a-z_.-]{2,16}[0-9a-z]$/i;
            if(regExp.test(username)){
                document.getElementById("s1").innerHTML = "<span style='font-size: 12px;color:green;margin-left: 10px;'>用户名格式正确</span>"
                return true;
            } else{
                document.getElementById("s1").innerHTML = "<span style='font-size: 12px;color:red;margin-left: 10px;'>用户名格式错误</span>"
                return false;
            }
        }

        function tipPhone(){
            document.getElementById("s3").innerHTML = "<span style='font-size: 12px;background:#FFFFDA;margin-left: 10px;'>手机号码由11位数字组成,必须以13、15、16、18、19开头</span>";
        }

        function checkPhone(){
            let phone = document.getElementById("phone").value;
            let regExp = /^[1][35689]\d{9}$/;
            if(regExp.test(phone)){
                document.getElementById("s3").innerHTML = "<span style='font-size: 12px;color:green;margin-left: 10px;'>手机号码格式正确</span>"
                return true;
            } else{
                document.getElementById("s3").innerHTML = "<span style='font-size: 12px;color:red;margin-left: 10px;'>手机号码格式错误</span>"
                return false;
            }
        }

        function checkForm(){
            if(checkUsername() && checkPhone()){
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<form action="28-练习.html" onsubmit="return checkForm()">
    用户名:<input type="text" id="username" onfocus="tipUsername()" onblur="checkUsername()"><span id="s1"></span><br>
    密码:<input type="password" id="password"><span id="s2"></span><br>
    电话:<input type="text" id="phone" onfocus="tipPhone()" onblur="checkPhone()"><span id="s3"></span><br>
    邮箱:<input type="text" id="email"><span id="s4"></span><br>
    <input type="submit" value="提交">
</form>
</body>
</html>